<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container" style="overflow:hidden">
      <el-input clearable  @keyup.enter.native="handleFilter" v-model="listQuery.userPhone" style="width: 200px;margin-right:20px;margin-top:8px" class="filter-item" placeholder="请输入用户手机号" >
      </el-input>
      <el-select v-model="listQuery.statusId" placeholder="请选择状态" class="filter-item" style="width: 200px;margin-top:8px">
          <el-option v-for="item in status" :key="item.statusId" :label="item.name" :value="item.statusId"></el-option>
      </el-select>
      <!-- <el-date-picker
          v-model="listQuery.date"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          type="daterange"
          placeholder="选择日期"
          value-format="timestamp"
          style="margin-right:20px;">
      </el-date-picker> -->
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter" style="margin-left:7px;margin-top:7px;">查找</el-button>
      <el-button  type='primary' class="filter-item" @click="handleDownload"  icon="el-icon-download"  :loading="downloadLoading" style="margin-top:7px;">导出</el-button>
    </div>
        <!--表格 -->
          <el-table :data="list" element-loading-text="给我一点时间" v-loading="loading.list" border fit highlight-current-row style="width: 100%">
            <el-table-column prop="index" label="序号"> </el-table-column>
             <el-table-column prop="equimentNo" label="设备号"> </el-table-column>
            <el-table-column prop="nickName" label="用户昵称"> </el-table-column>
            <el-table-column prop="userPhone" label="手机号"> </el-table-column>
            <el-table-column prop="phone" label="联系方式"> </el-table-column>
            <el-table-column prop="context" label="反馈内容"> </el-table-column>
            <el-table-column prop="malfunctionName" label="反馈类型"> </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                 <el-button type='text' @click='viewImgList(scope.row.feedbackUrl)'>查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop='cTime' label="反馈时间"> 
              <template slot-scope="scope">
                {{scope.row.cTime  }}
              </template>
            </el-table-column>
            <el-table-column label="是否处理" prop='status'> 
            </el-table-column>
            <el-table-column label="操作"> 
              <template slot-scope="scope">
                <router-link :to="{name:'feedback-detail',query:{feedbackId:scope.row.feedbackId}}">
                   <el-button  size="mini" type="primary">查看</el-button>
                </router-link>              
              </template>
            </el-table-column>
          </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination 
          background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="listQuery.offset" 
          :page-sizes="[10, 20, 30, 40]" 
          :page-size="listQuery.limit" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
          </el-pagination>
        </div>
    <!-- dialog 查看图片弹窗 -->
    <el-dialog  title="反馈详情图" :visible.sync="dialog.view">
       <el-carousel type="card" trigger="click" height="150px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="item" style="max-height:500px;width:400px;">
        </el-carousel-item>
      </el-carousel>    
    </el-dialog>
    <!-- 回到顶部 -->
    <BackToTop></BackToTop>
  </div>
</template>
<script>
import { queryFeedbackList } from '@/api/feedback'
import BackToTop from '@/components/BackToTop'
import { parseTime } from '@/utils'
export default {
  name: 'feedback_list',
  components: {
    BackToTop
  },
  data() {
    return {
      loading: {
        list: false
      },
      dialog: {
        view: false,
      },
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10,
        userPhone:'',
        feedbackType:'',
        feedbackId:'',
        statusId:''
        // nickName: '',
        // date: '',
      },
      status:[
        {statusId:1,name:"未处理"},
        {statusId:2,name:"已处理"}
      ],     
      list:null,
      title:[
        {title:'设备问题'},
        {title:'支付问题'},
        {title:'其他问题'}
      ],
      imgList:[],
      downloadLoading: false
    }
  },
 
  created() {
    this.getList()
  },
  methods: {
    //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['用户昵称','手机号', '反馈内容','反馈类型', '图片','反馈时间','是否处理']
        const filterVal = ['nickName', 'userPhone', 'context', 'feedbackType', 'feedbackUrl', 'cTime','status']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '意见反馈'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
      if (j === 'cTime') {
      return parseTime(v[j])
      } else {
      return v[j]
      }
      }))
    },
    // 查看图片
     viewImgList (imgs) {
      // console.log(imgs)
      imgs = imgs || ''
      this.imgList = imgs.split(',')
      this.dialog.view = true
    },
    //获取反馈列表
    async getList() {
      this.loading.list = true
      try {
        const { data } = await queryFeedbackList(this.filtersCondition)
        this.list = data.records.map((item, index) => ({
          index: index + 1, 
          ...item, 
          status: item.status == 1 ? '未处理' : '已处理'
          
        }))
        this.total = data.total
      } catch (error) {       
      }
      this.loading.list = false     
    },
    // //点击tab切换
    // handleClick(tab,index) {
    //     this.listQuery.feedbackType = Number(tab.index)+1
    //     this.getList()
    // },
    //点击查找
    handleFilter() {
      this.listQuery.offset = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val
      this.getList()
    },
    //将时间戳转化成日期字符串
    formatDate(date, offset){
        if(date && typeof date  == 'object' ){
            const d = date[offset];
            return new Date(d).getTime()
        }
        return ''
    },
  }, 
  computed: {
    //请求的过滤条件
        filtersCondition(){
            return {
                feedbackType: this.listQuery.feedbackType,
                feedbackId: this.listQuery.feedbackId,
                status: Number(this.listQuery.statusId),
                userPhone: this.listQuery.userPhone,
                // startTime:this.formatDate(this.listQuery.date,0),
                // endTime: this.formatDate(this.listQuery.date, 1),
                offset: this.listQuery.offset,
                limit: this.listQuery.limit,
            }
        },
  }
}
</script>
<style lang="scss" scoped>
  /deep/   .el-carousel__container{
  height:500px !important;
}
  
</style>
